// 整个项目的公共样式

// 覆盖vant自带导航栏的样式
.van-nav-bar {
  background-color: #3196fa;
  .van-nav-bar__title{
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
}

#app{
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
// .container是Layout.vue组件的根元素的类名
.container{
  width: 100%;
  height: 100%;
}
// .index 是home/index.vue组件的根元素的类名
.index {
  height: 100%;
  .van-tabs {
      display: flex;
      flex-direction: column;
      height: 100%;
      .van-tabs__content {
          flex:1;
          overflow: hidden;
      }
  }
  .van-tab__pane{
      height: 100%;
  }
  // .scroll-wrapper是home/ArticleList.vue组件的根元素的类名
  .scroll-wrapper{
      overflow:auto;
      height: 100%;
  }
}

// 主页
.index{
  // 让出顶部导航条的距离
  padding-top:46px;
  // margin-bottom: 46px;
  .van-tabs__wrap {
    position:fixed;
    top:46px;
    left:0px;
    // right:0px;
    right:30px; 
  }
  // 让出van-tabs的高度
  .van-tabs--line{
      padding-top:50px; 
  }
  // 能看到文章列表中的loading效果
  .van-tabs__content { padding-bottom: 150px; } 

  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 52px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1
  }
}
